<template>
	<view class="problem">
		<view class="space-between hor-center">
			<view class="col">
				<view class="title text-overflow">
					<u-text :lines="2" :text="prob.title" color="#000" size="16" :bold="true"></u-text>
				</view>
				<view class="user flex-start">
					<view class="headimg">
						<img class="logo" src="" />
					</view>
					<view class="name">
						{{prob.name}}
					</view>
					<view class="cue">
						{{prob.cue}}
					</view>
				</view>
				<view class="content-text">
					<u-text :lines="3" :text="prob.content" color="#999999" size="14"></u-text>
				</view>
				<view class="answer">
					wulujia、方军、垃圾分类...、沈月 等也发表了8个回答
				</view>
				<view class="interaction flex-start">
					<view class="space-between">
						<u-icon name="thumb-up" size="24" color="#b0b0b0"></u-icon>
						<span>12</span>
					</view>
					<view class="space-between">
						<u-icon name="chat" size="24" color="#b0b0b0"></u-icon>
						<span>12</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "problem",
		data() {
			return {
			
			};
		},
		props: {
			prob: Object
			// title: String,
			// name: String,
			// cue: String,
			// content: String,
			// answer: String
		}
	}
</script>

<style lang="scss" scoped>
	.problem {
		padding: 2vh 4vw;
		border-radius: 2vw;
		background-color: #fff;
	}
	
	.title {
		font-weight: 700;
	}
	
	.user {
		height: 4vh;
		align-items: center;
		margin: 2vw 0;
	}
	
	.headimg {
		width: 24px;
		height: 24px;
		background-color: #61c2b7;
		border-radius: 50%;
		margin-right: 2vw;
	}
	
	.name {
		font-size: 13px;
		font-weight: 700;
		margin-right: 1vw;
	}
	
	.cue {
		font-size: 14px;
		font-weight: 700;
		color: #60c1b6;
		letter-spacing: 1px;
	}
	
	.content-text {
		margin-bottom: 1vh;
	}
	
	.answer {
		display: block;
		color: #888;
		height: 8vh;
		padding: 1vh 4vw;
		font-size: 14px;
		background-color: #f5fefe;
		margin: 1vh 0;
	}
	
	.interaction {
		margin-top: 1vh;
		font-size: 14px;
		color: #888;
	}
	.interaction > view {
		width: 13vw;
		margin-right: 10vw;
	}
	.interaction span {
		padding-top: 1vw;
	}
</style>
